﻿<DemoPageSectionComponent Id="DialogsAndWindows-Popup-Alignment" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="target-container" @onclick="@(() => Visible = true)">
            <p class="target-caption">CLICK TO SHOW A POP-UP WINDOW</p>
        </div>
        <DxPopup
            HorizontalAlignment="@HorizontalAlignment"
            VerticalAlignment="@VerticalAlignment"
            Width="@Width"
            @bind-Visible="@Visible"
            HeaderText="Popup"
            BodyText="@Constants.Text"
            SizeMode="Params.SizeMode">
        </DxPopup>
    </ChildContentWithParameters>
    <OptionsContent>
        <OptionComboBox Label="Horizontal Alignment:" CssClass="ow-100" Data="@HorizontalAlignmentSource" @bind-Value="@HorizontalAlignment" />
        <OptionComboBox Label="Vertical Alignment:" CssClass="ow-100" Data="@VerticalAlignmentSource" @bind-Value="@VerticalAlignment" />
        <OptionComboBox Label="Width:" CssClass="ow-100" Data="@WidthSource" @bind-Value="@Width" />
    </OptionsContent>

    @code {
        static HorizontalAlignment[] HorizontalAlignmentSource { get; set; } = (HorizontalAlignment[])Enum.GetValues(typeof(HorizontalAlignment));
        static VerticalAlignment[] VerticalAlignmentSource { get; set; } = (VerticalAlignment[])Enum.GetValues(typeof(VerticalAlignment));
        static string[] WidthSource { get; set; } = {"300px", "50%", "auto"};

        bool Visible { get; set; }
        HorizontalAlignment HorizontalAlignment { get; set; } = HorizontalAlignment.Center;
        VerticalAlignment VerticalAlignment { get; set; } = VerticalAlignment.Center;
        string Width { get; set; } = WidthSource.First();
    }

</DemoPageSectionComponent>
